<template>
  <view class="page">
    <Header> </Header>
    <view class="main_container">
      <view class="main_content">
        <Breadcrumb :text="'主页-语法速通'"></Breadcrumb>
        <RouterTabs :list="routerList" :current="0"> </RouterTabs>
        <view class="content">
          <view class="box">
            <view class="top">
              <view class="tips"> 请选择正确答案 </view>
              <view class="info">
                本次测试共{{ questionList.length }}题,总分100分
              </view>
              <view class="time">
                倒计时：{{ minuteNumber }}分{{ secondNumber }}秒
              </view>
            </view>
            <view class="bottom">
              <TestQuestion
                v-if="questionList.length > 0"
                ref="testQuestion"
                :list="questionList"
                @clearTimer="clearTimer"
                @commitTest="commitTest"
              ></TestQuestion>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getQuestions, grammarCommit } from "@/api/grammar";
export default {
  name: "PaperDetail",
  components: {},
  filters: {
    periodFilter(status) {
      const statusMap = {
        1: "小学语法专项训练",
        2: "初中语法专项训练",
        3: "高中语法专项训练",
        4: "中考押题语法训练",
      };
      return statusMap[status];
    },
  },
  data() {
    return {
      routerList: [
        {
          name: "语法框图",
          url: "pages/grammar/grammarDiagram",
        },
        {
          name: "自主组卷",
          url: "pages/grammar/grammarPaper",
        },
        {
          name: "错题本",
          url: "pages/grammar/grammarBook",
        },
      ],
      conceptId: "",
      grammarItem: {},
      questionList: [],
      minute: 30,
      minuteNumber: "30",
      second: 0,
      secondNumber: "00",
      timerId: null,
    };
  },
  onLoad(option) {
    this.conceptId = option.conceptId;
    this.init();
  },
  onReady() {
    this.timer();
  },
  methods: {
    init() {
      let params = {
        conceptId: this.conceptId,
      };
      getQuestions(params).then((res) => {
        this.grammarItem = res.data.item;
        this.questionList = res.data.questions;
      });
    },
    timer() {
      this.timerId = setInterval(() => {
        this.second--;
        if (this.second < 0) {
          this.second = 59;
          this.minute--;
        }
        if (this.minute < 0) {
          return;
        }
        if (this.second < 10) {
          this.secondNumber = this.second.toString().padStart(2, "0");
        } else {
          this.secondNumber = this.second.toString();
        }
        if (this.minute < 10) {
          this.minuteNumber = this.minute.toString().padStart(2, "0");
        } else {
          this.minuteNumber = this.minute.toString();
        }
        this.countdown++;
      }, 1000);
    },
    clearTimer() {
      clearInterval(this.timerId);
    },
    commitTest(list, num) {
      let params = {
        wrongIds: list,
        rightNum: num,
      };
      grammarCommit(params).then((res) => {
        this.$refs.testQuestion.showResult(res.data.hasGold, res.data.goldNum);
      });
    },
  },
};
</script>
<style scoped lang="scss">
@import "./grammarDiagramWord.scss";
</style>
